<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流追踪系统 - 实时包裹跟踪解决方案</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">
                <i class="fas fa-truck-fast"></i>
                <h1>物流追踪系统</h1>
            </div>
            <nav class="main-nav">
                <ul>
                        <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                        <li><a href="pages/user/dashboard.html"><i class="fas fa-user"></i> 用户中心</a></li>
                        <li><a href="pages/courier/dashboard.html"><i class="fas fa-truck"></i> 物流员中心</a></li>
                        <li><a href="pages/admin/dashboard.html"><i class="fas fa-cogs"></i> 管理员中心</a></li>
                        <li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                    </ul>
            </nav>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <main class="container" id="app-container">
        <section class="hero">
            <div class="hero-content">
                <h2>实时追踪您的包裹</h2>
                <p>简单、快速、可靠的物流追踪解决方案，让您随时掌握包裹动态</p>
                <div class="track-form">
                    <div class="form-group">
                        <input type="text" id="tracking-number" placeholder="请输入运单编号" required>
                        <button id="track-btn" class="btn-primary">
                            <i class="fas fa-search"></i> 立即查询
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section class="features">
            <h2>核心功能</h2>
            <div class="feature-cards">
                <div class="feature-card animate-on-scroll">
                    <div class="icon-container">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3>实时追踪</h3>
                    <p>随时随地查看包裹位置和状态，实时更新，精准掌握每一步物流信息</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="icon-container">
                        <i class="fas fa-bell"></i>
                    </div>
                    <h3>及时通知</h3>
                    <p>物流信息变更时立即推送通知，不再错过重要更新，让您安心等待</p>
                </div>
                <div class="feature-card animate-on-scroll">
                    <div class="icon-container">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>安全可靠</h3>
                    <p>信息加密传输，多重验证，保障您的数据安全，让您的信息不被泄露</p>
                </div>
            </div>
        </section>

        <section class="how-it-works">
            <h2>如何使用</h2>
            <div class="steps-container">
                <div class="step animate-on-scroll">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>输入运单号</h3>
                        <p>在搜索框中输入您的运单编号，点击查询按钮</p>
                    </div>
                </div>
                <div class="step-connector"></div>
                <div class="step animate-on-scroll">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>查看详情</h3>
                        <p>获取实时物流信息和包裹位置，支持查看历史记录</p>
                    </div>
                </div>
                <div class="step-connector"></div>
                <div class="step animate-on-scroll">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>可选：注册账号</h3>
                        <p>创建个人账号，享受更多功能（如物流通知、历史查询等）</p>
                    </div>
                </div>
                <div class="step-connector"></div>
                <div class="step animate-on-scroll">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>接收通知</h3>
                        <p>注册后可设置通知偏好，获取最新物流动态，包裹到达时及时提醒</p>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <footer>
        <div class="container footer-container">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>物流追踪系统致力于为用户提供高效、便捷、可靠的物流信息追踪服务，让物流变得更加透明和可控。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="/pages/auth/login.html">登录</a></li>
                    <li><a href="/pages/auth/register.html">注册</a></li>
                    <li><a href="/pages/user/dashboard.html">用户中心</a></li>
                    <li><a href="/pages/courier/dashboard.html">物流员中心</a></li>
                    <li><a href="/pages/admin/dashboard.html">管理员中心</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <ul>
                    <li><i class="fas fa-phone"></i> 400-123-4567</li>
                    <li><i class="fas fa-envelope"></i> support@wuliuzhuizong.com</li>
                    <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区物流大厦15层</li>
                </ul>
            </div>
        </div>
        <div class="container footer-bottom">
            <p>&copy; 2023 物流追踪系统 版权所有</p>
        </div>
    </footer>

    <script type="module">
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 导入authService并暴露到全局
            import('./js/auth.js').then(authModule => {
                window.authService = authModule.default;

                // 导入并初始化应用
                import('./js/app.js');

                // 移动端菜单切换
                const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
                const mainNav = document.querySelector('.main-nav');

                if (mobileMenuBtn && mainNav) {
                    mobileMenuBtn.addEventListener('click', function() {
                        mainNav.classList.toggle('active');
                        mobileMenuBtn.querySelector('i').classList.toggle('fa-bars');
                        mobileMenuBtn.querySelector('i').classList.toggle('fa-times');
                    });
                }

                // 滚动动画
                const animateOnScroll = () => {
                    const elements = document.querySelectorAll('.animate-on-scroll');
                    elements.forEach(element => {
                        const elementPosition = element.getBoundingClientRect().top;
                        const screenPosition = window.innerHeight / 1.2;

                        if (elementPosition < screenPosition) {
                            element.classList.add('visible');
                        }
                    });
                };

                // 首次调用
                animateOnScroll();

                // 滚动时调用
                window.addEventListener('scroll', animateOnScroll);
            });
        });
    </script>
</body>
</html>